<template>
  <!--QA武器库-->
  <div>
    <!--查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="type" @change="changeType" placeholder="全部数据" style="width: 120px" >
        <el-option v-for="item in AllOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input @change="changeType" placeholder="请输入内容"  suffix-icon="el-icon-search" style="width: 150px" v-model="search"></el-input>
      <!--<el-button type="text">
        <el-button icon="el-icon-search" size="small" >问题全文搜索</el-button>
      </el-button>-->
      <span>问题全文搜索</span>

    </el-row>
    <!--QA武器库-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span set-lan="html:QA武器库">QA武器库</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </el-col>
      <!--QA武器库dialog-->
      <el-dialog title="QA武器库" :visible.sync="dialogFormVisible" @open="openDialog" @close="closeDialog" width="60%" style="color: #333333"  >
        <el-form :model="qa" ref="qa" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold">QA武器库</span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="问题:" prop="qaQuestion">
                <el-input  v-model="qa.qaQuestion" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="解答:">
                <el-input type="textarea"  v-model="qa.qaAnswer" :autosize="{ minRows: 10, maxRows: 10}" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作者:">
                <el-input :disabled="true" v-model="qa.employeeByEmpId.empName" style="width: 79%">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建日期:">
                <el-date-picker  v-model="qa.qaCreateDate" type="date" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="分类:">
                <el-radio-group v-model="radio">
                  <el-radio :label=1>A</el-radio>
                  <el-radio :label=2>B</el-radio>
                  <el-radio :label=3>C</el-radio>
                  <el-radio :label=4>D</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button type="primary" @click="addQaList()">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </el-dialog>
    </el-row>
    <!--QA武器库表格-->
    <el-table ref="multipleTable" :data="qaList" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="qaId" label="ID" wsortable></el-table-column>
      <el-table-column label="问题" >
        <template slot-scope="scope">
          <router-link :to="'/qaeview'">
            <div style="color: #333333">
              <i class="el-icon-caret-right"></i>
              <span >{{scope.row.qaQuestion}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName"  label="作者" ></el-table-column>
      <el-table-column prop="qaType"  label="分类" >
        <template slot-scope="scope">
          <span v-if="scope.row.qaType===1">A</span>
          <span v-if="scope.row.qaType===2">B</span>
          <span v-if="scope.row.qaType===3">C</span>
          <span v-if="scope.row.qaType===4">D</span>
        </template>
      </el-table-column>
      <el-table-column prop="qaCreateDate" label="创建时间" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button size="mini" @click="handleEdit(scope.row)"
                       icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button size="mini" @click="handleDelete(scope.row)"
                       icon="el-icon-delete" type="danger" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete"
                     @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="16">
        <el-pagination :page-size="pageSize" layout="prev, pager, next, jumper" @current-change="changePage"
                       :total="totalSize"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      emp: {},
      emp2: {},
      newdate: '',
      type: '',
      search: '',
      pageSize: 2, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      AllOptions: [{
        value: 1,
        label: 'A'},
      {
        value: 2,
        label: 'B'},
      {
        value: 3,
        label: 'C'},
      {
        value: 4,
        label: 'D'}],
      radio: 1,
      dialogFormVisible: false,
      qa: {
        qaId: 0,
        qaQuestion: '',
        qaAnswer: '',
        qaType: '',
        employeeByEmpId: '',
        qaCreateDate: this.newdate
      },
      qaList: [],
      timer: '', // 定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
      rules: {
        qaQuestion: [
          { required: true, message: '请输入问题', trigger: 'blur' }
        ]},
      mulSelection: []
    }
  },
  methods: {
    // 查询当前员工
    loginEmp () {
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
          this.emp2 = this.emp
        })
        .catch(function (v) {})
    },
    initData (currPage, pageSize) {
      this.$axios.get('http://localhost:8088/qa-list/', {params: {page: currPage, size: pageSize, search: this.search, type: this.type}})
        .then(v => {
          this.qaList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    // 打开dialog事件
    openDialog () {
      this.qa.employeeByEmpId = this.emp
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.qa.resetFields()
      this.qa = {
        qaId: 0,
        qaQuestion: '',
        qaAnswer: '',
        qaType: '',
        employeeByEmpId: '',
        qaCreateDate: this.newdate
      }
      this.emp = this.emp2
    },
    addQaList () {
      this.qa.qaType = this.radio
      this.$refs.qa.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/qa-addQa/', this.qa)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize)
              // 2、关闭弹框
              this.dialogFormVisible = false
              // 3、重新初始化表单数据模型
              this.qa = {
                qaId: 0,
                qaQuestion: '',
                qaAnswer: '',
                qaType: '',
                employeeByEmpId: '',
                qaCreateDate: this.newdate
              }
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changePage (val) {
      this.initData(val, this.pageSize, this.search, this.type)
    },
    changeType () {
      this.initData(1, this.pageSize, this.search, this.type)
    },
    handleEdit (val) {
      this.dialogFormVisible = true
      this.qa.qaId = val.qaId
      this.qa.qaQuestion = val.qaQuestion
      this.qa.qaAnswer = val.qaAnswer
      this.radio = val.qaType
      this.qa.qaCreateDate = val.qaCreateDate
      this.qa.employeeByEmpId = val.employeeByEmpId
      this.emp = val.employeeByEmpId
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/qaview')
    },
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(val['id'])
        this.$axios.post('http://localhost:8080/save-emp', this.qs.stringify(val['id']))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/qaview', this.qs.stringify(row))
      })
    }
  },
  created: function () {
    this.loginEmp()
    this.initData(this.currPage, this.pageSize, this.search, this.type)
    this.newdate = new Date()
    var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function () {
      _this.currentTime = // 修改数据date
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1) +
        '-' +
        new Date().getDate() +
        ' '
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }

  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
